<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/fontello-embedded.css" />
    <link rel="stylesheet" type="text/css" href="css/animate.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <div class="inner">
        <div class="inner-box flex">
            <div class="inner-left">
                <span class="title">PRIME-SUITE</span>
                <div class="nav-list">
                    <ul >
                        <li class="nav-first nav-first-active">

                            <a href="javascript:;">
                                <i class="demo-icon icon-laptop"></i>
                                内容监测
                                <i class="demo-icon icon-left-dir arrow-rotate"></i>
                            </a>
                            <div class="nav-second" style="display: block">
                                <ul>
                                    <li >
                                        <a href="javascript:;" class="nav-second-normal">
                                            <i class="demo-icon icon-angle-right"></i>
                                            行业概览
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" class="nav-second-normal">
                                            <i class="demo-icon icon-angle-right"></i>
                                            营销战役
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" class="nav-second-normal">
                                            <i class="demo-icon icon-angle-right"></i>
                                            危机预警
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" class="nav-second-normal">
                                            <i class="demo-icon icon-angle-right"></i>
                                            报告中心
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>

                        <li class="nav-first">
                            <a href="javascript:;">
                                <i class="demo-icon icon-tags"></i>
                                账号监测
                                <i class="demo-icon icon-left-dir"></i>
                            </a>
                            <div class="nav-second">
                                <ul>
                                    <li>
                                        <a href="javascript:;" class="nav-second-normal">
                                            <i class="demo-icon icon-angle-right"></i>
                                            账号列表
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" class="nav-second-normal">
                                            <i class="demo-icon icon-angle-right"></i>
                                            账号分析
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>

                        <li class="nav-first">
                            <a href="javascript:;">
                                <i class="demo-icon  icon-cog"></i>
                                系统设置
                                <i class="demo-icon  icon-left-dir"></i>
                            </a>

                            <div class="nav-second">
                                <ul>
                                    <li>
                                        <a href="javascript:;" class="nav-second-normal">
                                            <i class="demo-icon icon-angle-right"></i>
                                            数据面板
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" class="nav-second-normal">
                                            <i class="demo-icon icon-angle-right"></i>
                                            监测配置
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" class="nav-second-normal">
                                            <i class="demo-icon icon-angle-right"></i>
                                            账号授权
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" class="nav-second-normal">
                                            <i class="demo-icon icon-angle-right"></i>
                                            文本分析
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>

                    </ul>
                </div>
            </div>

            <!-- mini bar -->
            <div class="mini-bar" style="display: none;">
                <p>
                  <i class="demo-icon icon-menu"></i>
                </p>
              <ul>
                  <li class="nav-first-active">
                      <a href="javascript:;">
                          <i class="demo-icon icon-laptop"></i>
                      </a>
                  </li>
                  <li>
                      <a href="javascript:;">
                          <i class="demo-icon icon-tags"></i>
                      </a>
                  </li>
                  <li>
                      <a href="javascript:;">
                          <i class="demo-icon  icon-cog"></i>
                      </a>
                  </li>

              </ul>
            </div>

            <div class="inner-right">
                <div class="inner-nav">
                    <a href="javascript:;" class="list-item">
                        欢迎你 tingting
                        <i class="demo-icon  icon-logout"></i>
                    </a>
                    <a href="javascript:;" class="list-item">切换账户</a>
                    <a href="javascript:;" class="list-item">切换面板</a>
                    <a href="javascript:;" class="list-item">切换项目</a>
                    <a href="javascript:;" class="list-item">切换语言</a>
                    <a id="home" href="javascript:;" class="last-item">
                        <i class="demo-icon icon-menu"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        (function () {

            var currentIndex = 0;

            // nav active
           $(".nav-first").each(function () {
               this.onclick = function () {
                   $(this).siblings().children('.nav-second').css('display','none');

                   $(this).children(".nav-second").animate({height:'toggle'},function () {
                       var showFlag =$(this).css("display");
                       if(showFlag == 'block'){
                           $(this).prev().children().addClass('arrow-rotate')
                           $(this).parent().siblings().children('a').children('.icon-left-dir').removeClass('arrow-rotate')

                       }
                       else {
                           $(this).prev().children().removeClass('arrow-rotate')
                       }

                   });
                   changeActive('mini-bar>ul>li',currentIndex,this)
               }
           });

            //nav-second stopPropagation()
            $(".nav-second>ul>li>a").each(function () {
                this.onclick = function (e) {

                    $(".nav-second>ul>li>a").removeClass('nav-second-active').addClass('nav-second-normal');
                    $(this).removeClass('nav-second-active').addClass('nav-second-active');
                    e.stopPropagation()
                }
            })

//
            // switch mini-bar
            $("#home").click(function () {
               var showFlag = $(".inner-left").css("display");
               if(showFlag == "block"){
                   $(".inner-left").css("display","none");
                   $(".mini-bar").css("display","block");

               }
               else{
                   $(".inner-left").css("display","block");
                   $(".mini-bar").css("display","none");
               }
            })
            
            // mini-bar click
            $(".mini-bar>ul>li").each(function (e) {
                this.onclick = function () {
                    $(".inner-left").css("display","block");
                    $(".mini-bar").css("display","none");
                    var temp = $(this).index();
                    var str ;
                    $(".nav-first:eq("+temp+")").children(".nav-second").css("display","block");
                    $(".nav-first:eq("+temp+")").siblings().children(".nav-second").css("display","none");

                    $(".nav-first:eq("+temp+")").children('a').children('.icon-left-dir').addClass('arrow-rotate');
                    $(".nav-first:eq("+temp+")").siblings().children('a').children('.icon-left-dir').removeClass('arrow-rotate')


                    $(this).prev().children().addClass('arrow-rotate')
                    $(this).parent().siblings().children('a').children('.icon-left-dir').removeClass('arrow-rotate')

                    changeActive('nav-first',currentIndex,this);


                }
            })


            // change active function
             function changeActive(selector,currentIndex,self){
                 $(self).siblings().removeClass('nav-first-active');
                 $(self).addClass('nav-first-active');
                 currentIndex = $(self).index();

                 switch (currentIndex){
                     case 0:
                     {
                         $("."+selector+":eq(0)").addClass("nav-first-active")
                         $("."+selector+":eq(0)").siblings().removeClass("nav-first-active")
                     }
                         break;
                     case 1:
                         $("."+selector+":eq(1)").addClass("nav-first-active")
                         $("."+selector+":eq(1)").siblings().removeClass("nav-first-active")
                         break;
                     case 2:
                         $("."+selector+":eq(2)").addClass("nav-first-active")
                         $("."+selector+":eq(2)").siblings().removeClass("nav-first-active")

                         break;
                 }
             }



        })();
    </script>

















































































</body>
</html>